<template>
  <div class="knowledge-detail">
    <el-row gutter="20">
      <!-- 图片部分 -->
      <el-col :span="10" class="image-container">
        <img :src="'http://localhost:8080/images/upload/' + knowledge.theory_knowledge_image"
          :alt="knowledge.name + '图片'" class="knowledge-image" />
      </el-col>

      <!-- 右侧信息 -->
      <el-col :span="14" class="info-container">
        <!-- 乐理知识标题 -->
        <h2 class="knowledge-title">{{ knowledge.name }}</h2>

        <!-- 基本信息 -->
        <p><strong>类型：</strong>{{ knowledge.type }}</p>

        <!-- 浏览量 -->
          <p><strong>浏览量：</strong>{{ knowledge.view_count }}</p>
        

        <!-- 收藏按钮 -->
        <el-button type="warning" class="favorite-button" @click="toggleFavorite">
          <span>{{ isCollected ? "已收藏" : "收藏" }}</span>
        </el-button>
        
      </el-col>
    </el-row>

    <!-- 描述 -->
    <div class="info-section">
      <h3>简介</h3>
      <p>{{ knowledge.description }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from "element-plus";
import { ArrowRight } from '@element-plus/icons-vue'

export default {
  props: ["id"],
  data() {
    return {
      knowledge: {
        name:"",
        type:"",
        cover_image:"",
        view_count: 0,
        theory_knowledge_image:"",
        description:""
      }, // 用于存储从后端获取的乐理知识数据
      knowledgeCoverUrl: '', // 乐理知识封面图片的 URL
      knowledgeImageUrl: '', // 乐理知识图片的 URL
      loading: true,
      error: false,
      isCollected: false, // 是否已收藏
    };
  },
  created(){
    this.fetchKnowledgeData();
    this.checkIfCollected();
  },
  methods: {
    // 检查是否已收藏
  checkIfCollected() {
    const userId = sessionStorage.getItem("user_id"); // 动态获取用户ID
    if (!userId) {
      console.warn("未登录用户，无法查询收藏状态");
      return;
    }

      axios
        .get(`/v1/tk/check`, {
          params: { userId, theoryKnowledgeId: this.id },
        })
        .then((response) => {
          this.isCollected = response.data.collected; // 设置收藏状态
        })
        .catch((error) => {
          console.error("检查收藏状态失败：", error);
        });
    },

    // 收藏或取消收藏操作
    toggleFavorite() {
      const userId = sessionStorage.getItem("user_id"); // 动态获取用户ID
      if (!userId) {
        ElMessage.warning("请先登录后再进行收藏操作！");
        return;
      }

      const url = this.isCollected
        ? `/v1/tk/delete`
        : `/v1/tk/add`;

      const data = { user_id: userId, theory_knowledge_id: this.id };

      axios({
        method: this.isCollected ? "delete" : "post", 
        url,
        data,
      })
        .then((response) => {
          if (response.data.success) {
            this.isCollected = !this.isCollected; // 切换收藏状态
            const message = this.isCollected ? "收藏成功" : "取消收藏成功";
            ElMessage.success(message);
          } else {
            ElMessage.error("操作失败，请稍后再试！");
          }
        })
        .catch((error) => {
          console.error("收藏操作失败：", error);
          ElMessage.error("网络错误，请稍后重试！");
        });
    },
    fetchKnowledgeData() {
      this.loading = true;
      this.error = false;
      axios
        .get(`/v1/tk2/${this.id}`)
        .then((response) => {
          this.knowledge = response.data;
          this.incrementViewCount();
        })
        .catch((error) => {
          this.error = true;
          console.error("获取乐理知识详情失败：", error);
        })
    },
    incrementViewCount() {
    axios.post(`/v1/tk/${this.id}`).then(response => {
      this.knowledge.view_count += 1; // 更新浏览量
    }).catch(error => {
      console.error('浏览量更新失败：', error);
    });
  },

  },



  




};
</script>

<style>
.basic-info p {
    word-wrap: break-word; /* 旧版浏览器可能需要这个 */
    overflow-wrap: break-word; /* 标准属性 */
    white-space: normal; /* 确保不会禁止换行 */
    text-align: left; /* 确保文字左对齐 */
  margin-bottom: 10px; /* 增加下方的间距，提升视觉效果 */
}
.knowledge-detail {

  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #a2b7a2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.loading {
  text-align: center;
  font-size: 18px;
  color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading i {
  margin-right: 8px;
}

.error-message {
  color: #e74c3c;
  text-align: center;
  font-size: 18px;
}

.error-message .retry-link {
  color: #3498db;
  cursor: pointer;
}
/* 类型部分样式 */
.info-container p {
  font-family: 'Noto Serif SC', 'KaiTi', 'Songti SC', serif;  /* 统一字体，带有中国风的优雅感 */
  font-size: 18px;  /* 适度增大字体 */
  color: #5b4f4f;  /* 深灰棕色，和背景协调 */
  margin-bottom: 15px;  /* 底部边距 */
  text-align: center;  /* 居中对齐 */
}
.content-wrapper {
  width: 100%;
  max-width: 1200px;
}

.knowledge-card {
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #ffffff;
  position: relative;
}

.image-container {
  display: flex;
  justify-content: center;

}

.knowledge-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  text-align: center; /* 文字居中 */
  padding: 20px;
  width: 100%;
  max-width: 500px; /* 限制宽度，防止过宽 */
}

.knowledge-title {
  font-family: 'Zhi Mang Xing', 'KaiTi', 'Songti SC', serif;  /* 使用有中国风的字体 */
  font-size: 32px;  /* 适当增大字体 */
  color: #3b2a2a;  /* 深棕色，符合古风的感觉 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 增加阴影效果，提升立体感 */
  margin-bottom: 20px;  /* 底部边距 */
  letter-spacing: 1px; /* 调整字间距，增添艺术感 */
  line-height: 1.4;  /* 增加行高，使标题更有层次 */
  text-align: center;  /* 居中对齐 */
}

.basic-info {
  font-size: 18px;
  color: #555;
  max-width: 700px; /* 设置最大宽度 */
  min-width: 300px; /* 设置最小宽度 */
  width: auto; /* 容器宽度自动调整 */
  box-sizing: border-box; /* 宽度计算包括内边距和边框 */
  overflow-wrap: break-word; /* 允许在长单词或URL地址处换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
  white-space: normal; /* 允许文本正常换行 */
}

.audio-section {
  margin-bottom: 20px;
}

audio {
  width: 100%;
  max-width: 400px;
}

.info-section {
  white-space: pre-wrap;  /* 保留换行符和空格 */
  word-wrap: break-word;  /* 防止长单词溢出 */
  font-family: 'Noto Serif SC', 'Songti SC', 'KaiTi', serif; /* 使用中国风字体 */
  font-size: 18px;  /* 适当增大字体 */
  color: #2e2e2e;  /* 深灰色，给人稳重典雅的感觉 */
  line-height: 1.8;  /* 增大行高，增强可读性 */
  letter-spacing: 0.5px; /* 适度的字间距 */
  text-align: justify;  /* 两端对齐 */
  margin: 20px 0;  /* 上下边距 */
  padding: 0 10px;  /* 左右内边距，避免文字紧贴边框 */
}

.info-section h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #666;
}

@media (max-width: 768px) {
  .notation-card {
    padding: 20px;
  }

  .image-container {
    margin-bottom: 20px;
  }

  .info-container {
    align-items: center;
  }
}
</style>
